<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--css文件-->
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />

    <main class="main-content">
        <div class="login-register-area section-space-y-axis-100">
            <div class="container">
                <div class="row">
                    <div align="center">

                        <c:if test="${!empty msg}">
                            <div class="alert alert-success"
                                 style="text-align: center; width: 280px;margin-right: 14px;">${msg}</div>
                        </c:if>

                        <c:if test="${!empty failMsg}">
                            <div class="alert alert-danger"
                                 style="text-align: center; width: 280px;margin-right: 14px;">${failMsg}</div>
                        </c:if>
                        <form id="registerForm" method="post" action="/bookmall/register"
                              onkeydown="if(window.event.keyCode == 13){return false;}">
                            <div class="login-form">
                                <div class="row">
                                    <h4 class="login-title" style="color: #abd373">注册</h4>
                                </div>

                                <div id="form_container2" style="padding-top: 25px;">

                                    <div class="form-group">
                                        <label for="userName" class="control-label">用户名</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="userName" name="userName"
                                                   placeholder="请输入用户名" required="required" autocomplete="off" data-tippy="由字母和数字组成，且长度在5到8位">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="phone" class="control-label">手机号</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="phone" name="phone"
                                                   placeholder="请输入手机号" required="required" autocomplete="off" data-tippy="11位数可用手机号">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="phone" class="control-label">验证码</label>
                                        <div class="col-sm-4">
                                            <div class="input-group">
                                                <input type="text" class="form-control" name="authcode" id="authcode"
                                                       placeholder="请输入6位数验证码" autocomplete="off" data-tippy="6位数字验证码">
                                                <span class="input-group-btn">
                                                    <button id="getCodeBtn" class="btn btn-success" type="button"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#smsAuthModel"
                                                            style="height: 45px!important;">获取验证码</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="password" class="control-label">密码</label>
                                        <div class="col-sm-4">
                                            <input type="password" class="form-control" id="password" name="password"
                                                   placeholder="请输入密码" required="required" autocomplete="off" data-tippy="至少包含一个字母和数字,长度6到12位">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label for="repassword" class="control-label">确认密码</label>
                                        <div class="col-sm-4">
                                            <input type="password" class="form-control" id="repassword"
                                                   name="repassword"
                                                   placeholder="确认密码" required="required" autocomplete="off" data-tippy="再输入一次上面输入过的密码">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 pt-5">
                                    <button class="btn btn-custom-size lg-size btn-pronia-primary" type="button"
                                            onclick="validateRegist()">注册
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <jsp:include page="common/common-validate.jsp" />
            </div>
        </div>
    </main>


    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>
<!--js文件-->
<jsp:include page="common/common-js.jsp" />

<script>
    $(function () {
        // 弹出框
        $('.popover-toggle').popover();
        // 隐藏模态框
        $('#smsAuthModel').modal('hide');
        // 禁用验证码输入框
        document.getElementById("authcode").setAttribute("disabled", "true");
        // 验证值
        var a = 0;
        var b = 0;

        //禁用“确认重新提交表单”
        //window.history.replaceState(null, null, window.location.href);
    });

    function validatePhone() {
        var phone = $("#phone").val();
        var reg_phone = /^(13[0-9]|14[5|7]|15[0-9]|18[0-9]|19[4|5])\d{8}$/g;
        // 手机号
        var phone = document.forms["registerForm"]["phone"].value;
        var flag_phone = reg_phone.test(phone);
        reg_phone.lastIndex = 0;
        if (flag_phone) {
            return true;
        }
        return false;
    }

    // 每次打开模态框重置验证数值
    $("#smsAuthModel").on('shown.bs.modal', function () {
        a = Math.round(parseInt(Math.random() * 100));
        b = Math.round(parseInt(Math.random() * 100));
        document.getElementById('verify').innerHTML = a + " + " + b + " = ";
    });


    //timer变量，控制时间
    var InterValObj;
    //间隔函数，1秒执行
    var count = 60;
    //当前剩余秒数
    var curCount;

    function checkAnswer() {
        var result = document.getElementById('answer').value;
        if (result != a + b) {
            layer.msg("答案错误,请重新回答！", {time: 1000}, function () {
                document.getElementById('answer').value = "";
                $('#smsAuthModel').modal('hide');
            });
        } else {
            // 提示
            layer.msg("答案正确", {time: 800}, function () {
                document.getElementById('answer').value = "";
                $('#smsAuthModel').modal('hide');
            });

            if (validatePhone()) {
                document.getElementById("authcode").removeAttribute("disabled");
                /**
                 * 按钮倒计时
                 * @type {number}
                 */
                curCount = count;
                //设置按钮为禁用状态
                document.getElementById("getCodeBtn").setAttribute("disabled", "true");
                $('#getCodeBtn').addClass('layui-btn-disabled');
                $('#getCodeBtn').text(curCount + "秒后重获");
                // 启动计时器timer处理函数，1秒执行一次
                InterValObj = window.setInterval(SetRemainTime, 1000);

                var phone = document.forms["registerForm"]["phone"].value;
                $.ajax({
                    url: "/bookmall/sms/send",
                    data: {
                        phone: phone
                    },
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            layer.msg("发送成功，请注意查收~", {icon: 1});
                        } else {
                            layer.msg("发送失败！请检查手机号是否正确或联系管理员处理", {icon: 2});
                        }
                    },
                    error: function (data) {
                        layer.msg("请求发送失败！", {icon: 2});
                    }
                });
            } else {
                layer.msg("手机号格式错误,请确认后重试", {icon: 2});
                document.forms["registerForm"]["phone"].value = "";
            }
        }
    }


    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            $('#getCodeBtn').removeClass('layui-btn-disabled');
            $('#getCodeBtn').text("重获验证码");
            // 停止计时器
            window.clearInterval(InterValObj);
            //移除禁用状态改为可用
            document.getElementById("getvercode").removeAttribute("disabled");
        } else {
            curCount--;
            $('#getCodeBtn').text(curCount + "秒后重获");
        }
    }
</script>
</body>
</html>
